<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Document</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/common.js"></script>
</head>
<body style="background: #f5f5f5;">
	<div class="index_section1">
		<div class="index_section1_1 clearfix">
			<div class="left">
				<img src="images/a8.png" alt="">
			</div>
			<div class="right clearfix">
				<div class="ko">
					<ul class="news_li">
						<li class="chao">
							<a href="#" >迪迦奥特曼</a>
						</li>
						<li class="chao">
							<a href="#" >泰罗奥特曼</a>
						</li>
						<li class="chao">
							<a href="#" >迪迦奥特曼</a>
						</li>
						<li class="chao">
							<a href="#" >雷欧奥特曼</a>
						</li>
					</ul>
					<ul class="swap"></ul>
				</div>
			</div>
		</div>
	</div>
	<div class="index_section2">
		<div class="ppp">
			<div class="swiper-container" id="mm">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="a1">
							<p class="p1">共享一号</p>
						</div>
						<div class="a2">
							<div class="pic">
								<img src="images/a9.png" alt="">
							</div>
							<div class="text clearfix">
								<div class="left">
									<p class="p1">价值 10000 - 20009</p>
									<p class="p2">获得1.021枚SCB</p>
								</div>
								<div class="right">
									<span class="s1">预约中</span>
								</div>
							</div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="a1">
							<p class="p1">共享一号</p>
						</div>
						<div class="a2">
							<div class="pic">
								<img src="images/a9.png" alt="">
							</div>
							<div class="text clearfix">
								<div class="left">
									<p class="p1">价值 10000 - 20009</p>
									<p class="p2">获得1.021枚SCB</p>
								</div>
								<div class="right">
									<span class="s1">预约中1</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>
		</div>
	</div>
	<div class="index_section4 ">
		<div class="ppp">
			<div class="swiper-container" id="tt">
				<div class="swiper-wrapper">
					<div class="swiper-slide clearfix">
						<div class="b1 clearfix">
							<ul class="clearfix">
								<li>
									<p class="p1">预约能量</p>
									<p class="p2">20/40</p>
								</li>
								<li>
									<p class="p1">开放时间</p>
									<p class="p2">12:00-12:10</p>
								</li>
								<li>
									<p class="p1">合约收益</p>
									<p class="p2">3天/11%</p>
								</li>
							</ul>
						</div>
						<div class="a1">
							<p class="p1">共享一号简介</p>
						</div>
						<div class="a2">
							<div class="a2_1">
								<p class="p1">内容内容内容内容内容内容</p>
							</div>
						</div>
					</div>
					<div class="swiper-slide clearfix">
						<div class="b1 clearfix">
							<ul class="clearfix">
								<li>
									<p class="p1">预约能量</p>
									<p class="p2">20/40</p>
								</li>
								<li>
									<p class="p1">开放时间</p>
									<p class="p2">12:00-12:10</p>
								</li>
								<li>
									<p class="p1">合约收益</p>
									<p class="p2">3天/11%</p>
								</li>
							</ul>
						</div>
						<div class="a1">
							<p class="p1">共享一号简介</p>
						</div>
						<div class="a2">
							<div class="a2_1">
								<p class="p1">内容内容内容内容内容内容</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="kong"></div>
	<div class="footer">
		<ul>
			<li>
				<a href="">
					<img src="images/a11x.png" alt="">
					<p class="p1 select">首页</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/a12.png" alt="">
					<p class="p1 ">生态园</p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="images/a13.png" alt="">
					<p class="p1 ">我的</p>
				</a>
			</li>
		</ul>
	</div>
	<!-- 公告 -->
	<div class="alert_gong">
		<div class="alert_gong_1">
			<div class="a1">
				<div class="title">
					<p class="p1">
						<span class="s1">公告</span>
					</p>
				</div>
				<div class="center">
					<p class="p1">内容内容内容内容内容内容</p>
				</div>
			</div>
			<div class="a2">
				<img src="images/a15.png" class="close_alert_gong" alt="">
			</div>
		</div>
	</div>
	<!-- 提示 -->
	<div class="alert_ti">
		<div class="alert_ti_1">
			<div class="a1">
				<div class="title">
					<p class="p1">
						<span class="s1">提示</span>
					</p>
				</div>
				<div class="center">
					<p class="p1">恭喜，成功预约</p>
				</div>
				<div class="last">
					<button class="but1">确定</button>
				</div>
			</div>
			<div class="a2">
				<img src="images/a15.png" class="close_alert_ti" alt="">
			</div>
		</div>
	</div>
</body>
<script>
	var swiper1 = new Swiper('#mm', {
		spaceBetween: 30,
		centeredSlides: true,
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
	var swiper2 = new Swiper('#tt', {
		spaceBetween: 30,
		centeredSlides: true,
	});
	swiper1.controller.control = swiper2;
	swiper2.controller.control = swiper1;
</script>
<script>
	$(function(){
		$(".close_alert_gong").click(function(){
			$(".alert_gong").hide()
		})
	})
</script>
<script>
	function b(){	
		t = parseInt(x.css('top'));
		y.css('top','19px');	
		x.animate({top: t - 19 + 'px'},'slow');	//19为每个li的高度
		if(Math.abs(t) == h-19){ //19为每个li的高度
			y.animate({top:'0px'},'slow');
			z=x;
			x=y;
			y=z;
		}
		setTimeout(b,3000);//滚动间隔时间 现在是3秒
	}
	$(document).ready(function(){
		$('.swap').html($('.news_li').html());
		x = $('.news_li');
		y = $('.swap');
		h = $('.news_li li').length * 19; //19为每个li的高度
		setTimeout(b,3000);//滚动间隔时间 现在是3秒
		
	})
	
</script>
</html>